<template>
  <div class="apporintment">
    <pop-window
      v-if="pop"
      :date="date"
      :pop="pop"
      :clickTime="clickTime"
      @changepop="popevent($event)"
    ></pop-window>
    <p-back class="head"></p-back>
    <div class="book-detail">
      <div class="select">
        <h3>你的信息</h3>
        <input type="text" placeholder="你的姓名" v-model="privateInfo.uname" />
        <input type="text" placeholder="你的电话" v-model="privateInfo.tel" />
        <input type="text" placeholder="你的邮箱" v-model="privateInfo.mail" />
      </div>
      <div class="select">
        <h3>领养日期</h3>
        <van-cell
          title="选择日期"
          :value="date"
          @click="show = true"
          is-link
          icon="calendar-o"
        />
        <van-calendar v-model="show" @confirm="onConfirm" color="#4895f2" />
      </div>
      <div class="select">
        <h3>选择时间</h3>
        <div class="time-list">
          <filter-click
            v-for="(time, index) in AM"
            :key="index"
            class="time"
            @click.native="confirmTime(time)"
            :class="time === clickTime ? 'click-noon' : ''"
            >{{ time }}</filter-click
          >
          <div class="noon-line">
            <p class="noon">下午</p>
          </div>
          <filter-click
            v-for="(time, index) in PM"
            :key="index + 't'"
            class="time"
            @click.native="confirmTime(time)"
            :class="time === clickTime ? 'click-noon' : ''"
            >{{ time }}</filter-click
          >
        </div>
      </div>
      <p-button @click.native="order()">提交订单</p-button>
    </div>
  </div>
</template>
<script>
import { getuserInfo, createOrder } from "@/api.js";
import PopWindow from "@/components/popWindow.vue";
import PBack from "@/components/back.vue";
import FilterClick from "@/components/filterClick.vue";
import PButton from "@/components/button.vue";
import { Notify } from "vant";
export default {
  components: {
    PBack,
    FilterClick,
    PButton,
    PopWindow,
  },
  data() {
    return {
      AM: ["08:00 AM", "09:00 AM", "10:00 AM", "11:00 AM", "12:00 AM"],
      PM: ["14:00 PM", "15:00 PM", "16:00 PM", "17:00 PM", "18:00 PM"],
      clickTime: "",
      date: "",
      show: false,
      privateInfo: {},
      pop: false,
      mechanInfo: {}
    };
  },
  created() {
    this.mechanInfo = JSON.parse(this.$route.query.data)
    this.getPrivateInfo();
    console.log(this.mechanInfo);
  },
  methods: {
    popevent(msg) {
      this.pop = msg;
      this.$router.go(-1);
    },
    async order() {
      if (!this.date || !this.clickTime) {
        Notify("请选择领养时间");
      } else {
        try {
          console.log(this.mechanInfo);
          let user_id = JSON.parse(localStorage.getItem("user"));
          let pid = this.$route.params.id;
          let aid = this.$route.params.aid;
          let { uname, mail, tel } = { ...this.privateInfo };
          let params = {
            user_id,
            pid,
            aid,
            name: uname,
            mail,
            tel,
            create_time: new Date(),
            book_time: this.clickTime,
            book_date: this.date,
            userName: localStorage.name,
            gender: localStorage.gender,
            local: localStorage.local,
            meName: this.mechanInfo.name,
            meId: this.mechanInfo.id,
            meMail: this.mechanInfo.mail,
            meTel: this.mechanInfo.tel,
            meLocal: this.mechanInfo.local,
            petImg: this.mechanInfo.petImg
          };
          const { data, success } = await createOrder(params);
          if (success) {
            this.pop = true;
          } else {
            console("添加失败");
          }
        } catch (error) {
          Notify({ type: "warning", message: "请勿重复预订同一宠物" });
        }
      }
    },
    confirmTime(time) {
      this.clickTime = time;
    },
    formatDate(date) {
      return `${date.getYear() + 1900}-${date.getMonth() + 1}-${
        date.getDate() + 1
      }`;
    },
    onConfirm(date) {
      this.show = false;
      this.date = this.formatDate(date);
    },
    async getPrivateInfo() {
      let user = JSON.parse(localStorage.getItem("user"));
      let userInfo = { mail: user };
      const { data } = await getuserInfo(userInfo);
      this.privateInfo = data;
    },
  },
};
</script>
<style lang="less" scoped>
.apporintment {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  overflow-y: auto;
  input::placeholder {
    color: #bab3b3;
  }
  .head {
    background: white;
    position: fixed;
    width: 100%;
  }
  .book-detail {
    padding: 0.5rem;
    margin-top: 1.5rem;
    .select {
      font-size: 0.4rem;
      margin-bottom: 0.4rem;
      input {
        font-size: 0.4rem;
      }
      h3 {
        font-size: 0.5rem;
        margin-bottom: 0.5rem;
      }
      input {
        width: 100%;
        height: 1rem;
        margin-bottom: 0.3rem;
        border-bottom: 0.01rem solid #dcd0d0;
      }
      .van-cell {
        padding-left: 0;
        color: #bab3b3;
      }
      .time-list {
        display: flex;
        flex-wrap: wrap;
        .time {
          width: 30%;
        }
        .click-noon {
          background: #7db6fa;
          color: white;
        }
      }
      .noon-line {
        border-bottom: 0.01rem solid #bab3b3;
        width: 100%;
        position: relative;
        margin: 0.5rem 0 0.8rem;
        .noon {
          background: white;
          width: 2rem;
          text-align: center;
          position: absolute;
          top: -0.2rem;
          left: 0;
          right: 0;
          margin: 0 auto;
          color: #857f85;
        }
      }
    }
  }
}
</style>